import React, {ChangeEvent, FC, useEffect, useState} from "react";
import { Input, Space } from 'antd';
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
import {LIST_SEARCH_KEY} from "../constant";
import useQuestionSearch from "../hooks/useQuestionSearch";
//为什么要将搜索的东西反应到url上.
//这里谈到一个设计思想,就是所有的组件都围绕着url来,他作为一个调和者或者中者进行处理.


const { Search } = Input;
const SearchList :FC =()=>{
//组件受控
//  搜索的路由跳转
    const nav =useNavigate();
    const {pathname} = useLocation();
    const [value,setValue] = useState('');
    //获取url的相关的参数
    const  [serachPath] = useSearchParams();

    useEffect(()=>{
        const curVal = serachPath.get(LIST_SEARCH_KEY) || '';
        setValue(curVal);
    },[serachPath])

    // const {data,error,loading} = useQuestionSearch();

    function handlerChange(event:ChangeEvent<HTMLInputElement>){
             setValue(event.target.value);
    }


    function handlerSearch(value:string){
        // console.log(value)
        nav({
            pathname,
            search:`${LIST_SEARCH_KEY}=${value}`
        })
    }


    return<>
        <Search
            style={ {width:'250px'}}
            placeholder="输入关键字"
            allowClear
            enterButton="搜索"
            size="large"
            value={value}
            onChange={handlerChange}
            onSearch={handlerSearch}
        ></Search>
    </>
}
export default  SearchList;